<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
        <el-tabs v-model="activeName">
          <el-tab-pane label="角色管理" name="first">
            <el-button type="primary" @click="addRoleFn">+ 新增角色</el-button>
            <el-table
              :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
              style="width: 100%"
              border
            >
              <el-table-column label="序号" width="60px">
                <template v-slot="{$index}">
                  {{ $index+1 }}
                </template>
              </el-table-column>>
              <el-table-column label="角色名" prop="name" width="80px" />
              <el-table-column label="描述" prop="description" />
              <el-table-column align="right" label="操作">
                <!-- <template slot="header">
                  <el-input v-model="search" slot-scope="scope" size="mini" placeholder="输入关键字搜索" />
                </template> -->
                <template slot-scope="scope">
                  <el-button size="mini" type="success" @click="handleAssign(scope.row.id)">分配权限</el-button>
                  <el-button size="mini" type="success" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
                  <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>

            <div class="block">
              <span class="demonstration">显示总数</span>
              <el-pagination
                :current-page.sync="page"
                :page-size="pagesize"
                layout="total, prev, pager, next"
                :total="total"
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
              />
            </div>
          </el-tab-pane>
          <el-tab-pane label="公司信息" name="second">
            <el-form disabled label-width="120px">
              <el-form-item label="公司名称" />
              <el-input v-model="company.name" />
              <el-form-item label="公司地址" />
              <el-input v-model="company.companyAddress" />
              <el-form-item label="公司邮箱" />
              <el-input v-model="company.mailbox" />
              <el-form-item label="备注" />
              <el-input v-model="company.remarks" />
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </el-card>
      <!-- 新增角色弹窗 -->
      <AddRole
        ref="addRole"
        :show-dialog.sync="visibleDialog"
        @updateEvent="getRoleList"
      />
      <AssignPerm
        ref="assignPerm"
        :show-dialog.sync="showDialog"
      />
    </div>
  </div>
</template>

<script>
import { delRole, getCompanyById, getRoleList } from '@/api/setting'
import AddRole from './components/add-role.vue'
import AssignPerm from '../permission/components/assign-permission.vue'

export default {
  components: {
    AddRole, AssignPerm
  },
  data() {
    return {
      activeName: 'first',
      visibleDialog: false,
      showDialog: false,
      tableData: [],
      search: '',
      currentPage1: 1,
      total: 1,
      page: 1,
      pagesize: 52,
      company: {}
    }
  },
  async created() {
    this.getRoleList(this.page)
    this.company = await getCompanyById(this.$store.state.user.setUserInfo.companyId)
    // console.log(this.company)
  },
  methods: {
    // 新增角色
    addRoleFn() {
      this.visibleDialog = true
    },
    handleEdit(index, row) {
      console.log(index, row)
      this.visibleDialog = true
      console.log(this.$refs)
      this.$refs.addRole.getRoleDetailById(row.id)
    },
    handleDelete(index, row) {
      console.log(index, row.id)
      this.$confirm('此操作将删除该角色, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delRole(row.id)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
      this.getRoleList()
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.getRoleList(val)
    },
    async getRoleList(curPage) {
      const res = await getRoleList({
        page: curPage,
        pagesize: this.pagesize
      })
      // console.log(res)
      this.tableData = res.rows
      this.total = res.total
    },
    handleAssign(id) {
      this.showDialog = true
      this.$refs.assignPerm.getPermIds(id)
    }
  }
}

</script>

<style>

</style>
